<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <form @submit.prevent="sendForm">  
            <!-- form表单通常结合ajax使用 不需要使用action跳转 -->
            <!-- 
                v-model 也有事件修饰符
                .trim 去空格
                .lazy 懒加载 不使用实时监测 在失去焦点的瞬间收集
                .number 将收集的数据转成数字格式（不适用这个 通过input number输入的数字 收集上来会变成字符串）
             -->
            账号：<input type="text" v-model.trim="account">
            <br>
            密码：<input type="password" v-model="password">
            <br>
            年龄：<input type="number" v-model.number="age">
            <br>
            <!-- 作为单选框 可以使用name判断为一组数据 即可实现单选效果 -->
            性别：男<input type="radio" name="sex" value="male" v-model="sex">
                 女<input type="radio" name="sex" value="female" v-model="sex">
            <br>
            爱好：抽烟<input type="checkbox" value="smoking" v-model="hobby">
                 喝酒<input type="checkbox" value="drinkbeer" v-model="hobby">
                 烫头<input type="checkbox" value="hottinghair" v-model="hobby">
            <br>
            所属校区：
            <select v-model="place">
                <option value="">请选择校区</option>
                <option value="meikeyuan">煤科院</option>
                <option value="shenyang">沈阳中心</option>
            </select>
            <br>
            其他信息：<textarea name="" id="" cols="30" rows="10" v-model.lazy="other"></textarea>
            <br> 
            <input type="checkbox">阅读并接受<a href="">用户协议</a>
            <br>
            <input type="submit" value="提交">
        </form>
    </div>
    <script src="../vuejs/vue.js"></script>
    <script>
        const vm = new Vue({
            el : '#app',
            data() {
                return {
                    account : '',
                    password : '',
                    sex : 'female',
                    // 多组数据使用同一个v-model key 需要将数据类型写成数组
                    hobby : [],
                    place : '',
                    age : '',
                    other : ''

                }
            },
            methods: {
                sendForm(){
                    alert("send form")
                }
            },
        })
    </script>
</body>
</html>